/**
 * @typedef {Object} drawCircleConfig - 要画的圆的配置
 * @property {Number} x - 鼠标点击时或手指触摸时的x坐标
 * @property {Number} y - 鼠标的点击时或手指触摸时的y坐标
 * @property {Number} radius - 圆的半径
 * @property {String} paintingColor - 圆的颜色
 */

/**
 * 画圆
 * @param {HTMLCanvasElement} canvas - canvas画布
 * @param {drawCircleConfig} config - 要画的圆的配置
 */
function drawCircle(canvas, config) {
  const { x, y, radius, paintingColor } = config
  const ctx = canvas.getContext('2d')
  // 开始要画路径了
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, Math.PI * 2)
  ctx.fillStyle = paintingColor
  ctx.fill()
  ctx.closePath()
}

/**
 * @typedef {Object} drawLineConfig - 要画的线的配置
 * @property {Number} x1 - 第一个点的x坐标
 * @property {Number} y1 - 第一个点的y坐标
 * @property {Number} x2 - 第二个点的x坐标
 * @property {Number} y2 - 第二个点的y坐标
 * @property {Number} lineWidth - 线的粗细(宽度)
 * @property {String} paintingColor - 线的颜色
 */

/**
 * 画线
 * @param {HTMLCanvasElement} canvas - canvas画布
 * @param {drawLineConfig} config - 要画的线的配置
 */
function drawLine(canvas, config) {
  const { x1, y1, x2, y2, lineWidth } = config
  const ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.lineWidth = lineWidth
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.strokeStyle = paintingColor
  ctx.stroke()
  ctx.closePath()
}

/**
 * 设置canvas的大小
 * @param {HTMLCanvasElement} canvas - canvas画布
 */
function setCanvasSize(canvas) {
  // 可视区的宽高
  let clientWidth = document.documentElement.clientWidth
  let clientHeight = document.documentElement.clientHeight
  /**
   * 这里要注意，不能利用css样式来控制canvas的大小，
   * 我们需要设置canvas的属性width, height来等比例放大或缩小canvas
   * 这里设置为可视区大小的99%，防止出现滚动条
   */
  canvas.width = Math.ceil(clientWidth * 0.99)
  canvas.height = Math.ceil(clientHeight * 0.99)
}

/**
 * 获取鼠标或手指在可视区的坐标
 * @param {MouseEvent|TouchEvent} e - 事件参数对象
 */
function getPosition(e) {
  let x, y
  if (e.touches !== undefined) {
    // 移动设备
    x = e.touches[0].clientX
    y = e.touches[0].clientY
  } else {
    // PC
    x = e.clientX
    y = e.clientY
  }

  return { x, y}
}